<template>
<!-- 级联组件 -->
  <div id="app">
      <el-cascader :options="options" v-model="value" 
        :props="{ expandTrigger: 'hover', multiple: true, checkStrictly: true }" 
        @change="handelChange">
      </el-cascader>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      value:[],
      options:[
        {
          value:"grade",
          label:"年级",
          children:[
            {
              value:"middle school",
              label:"高中",
              children:[
                {
                  value:"high-3",
                  label:"高三",
                },
                {
                  value:"high-2",
                  label:"高二",
                },
                {
                  value:"high-1",
                  label:"高一",
                },
              ]
            },
            {
              value:"college",
              label:"大学",
              children:[
                {
                  value:"fleshman",
                  label:"大一",
                },
                {
                  value:"sophomore",
                  label:"大二",
                },
                {
                  value:"junior",
                  label:"大三",
                },
                {
                  value:"senior",
                  label:"大四",
                }
              ]
            }
          ]
        },
        {
          value:"department",
          label:"院系",
          children:[
            {
              value:"technology",
              label:"理学院",
            },
            {
              value:"economy",
              label:"经济学院",
            },
            {
              value:"politics",
              label:"马克思主义学院",
            },
            {
              value:"engineering",
              label:"工程学院",
            },
          ]
        }
      ]
    }
  },
}
</script>
<style>
  * {
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
</style>
<style lang="less" scoped>

</style>
